<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-10-15 12:42:21
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-08 22:01:03
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="1000"
  >
    <a-form ref="formRef" v-bind="formLayout" :model="model" :rules="rules">
      <a-tabs class="tabs">
        <a-tab-pane key="info" tab="企业基本信息">
          <a-form-item label="企业编码" prop="code">
            <a-input v-model:value="model.code"></a-input>
          </a-form-item>
          <a-form-item label="企业名称" prop="name">
            <a-input v-model:value="model.name"></a-input>
          </a-form-item>
          <a-row>
            <a-col :span="16">
              <a-form-item
                label="社会信用代码"
                prop="businessCode"
                :labelCol="{ span: 6 }"
              >
                <a-input
                  v-model:value="model.businessCode"
                ></a-input> </a-form-item
            ></a-col>
            <a-col :span="8">
              <a-form-item
                label="启用状态"
                status="status"
                :labelCol="{ span: 8 }"
                :wrapperCol="{ span: 10 }"
              >
                <a-checkbox v-model:checked="model.status">
                  <span style="color: #0081cc">{{
                    model.status == true ? "已启用" : "已停用"
                  }}</span>
                </a-checkbox>
              </a-form-item></a-col
            >
          </a-row>

          <a-form-item label="营业范围" prop="businessScope">
            <a-textarea v-model:value="model.businessScope" rows="3" />
          </a-form-item>

          <a-row>
            <a-col :span="12">
              <a-form-item
                label="企业类型"
                prop="enterpriseType"
                :labelCol="{ offset: 4, span: 4 }"
              >
                <dictionary-select
                  v-model:value="model.enterpriseType"
                  name="Platform.EnterpriseType"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="注册资本金"
                prop="registeredCapital"
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 14 }"
              >
                <a-input-number
                  style="width: 100%"
                  v-model:value="model.registeredCapital"
                  :addon-after="registeredCapital"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="行业类型"
                prop="type"
                :labelCol="{ offset: 4, span: 4 }"
              >
                <dictionary-select
                  v-model:value="model.type"
                  name="Platform.IndustryType"
                ></dictionary-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="行业子类型"
                prop="subType"
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 14 }"
              >
                <a-input v-model:value="model.subType"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="所属区域" prop="regionCode">
            <region-select v-model:value="model.regionCode" />
          </a-form-item>
          <a-form-item label="企业地址" prop="address">
            <a-input v-model:value="model.address"></a-input>
          </a-form-item>
          <a-form-item label="企业邮箱" prop="email">
            <a-input v-model:value="model.email"></a-input>
          </a-form-item>
          <a-form-item label="公司网站" prop="site">
            <a-input v-model:value="model.site"></a-input>
          </a-form-item>
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="联系人"
                porp="conactName"
                :labelCol="{ span: 4, offset: 4 }"
              >
                <a-input v-model:value="model.conactName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="联系电话"
                porp="phone"
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 14 }"
              >
                <a-input v-model:value="model.phone"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="account" tab="账户及法人信息">
          <a-card title="企业账户信息" size="small">
            <a-form-item label="开户账号" prop="accountNo">
              <a-input v-model:value="model.accountNo"></a-input>
            </a-form-item>
            <a-form-item label="开户行号" hasFeedback prop="accountBankNo">
              <a-input v-model:value="model.accountBankNo"></a-input>
            </a-form-item>
            <a-form-item label="开户行名称" prop="accountBankName">
              <a-input v-model:value="model.accountBankName"></a-input>
            </a-form-item>
          </a-card>
          <a-card title="企业法人信息" size="small" style="margin-top: 10px">
            <a-form-item label="法人姓名" prop="legalName">
              <a-input v-model:value="model.legalName"></a-input>
            </a-form-item>
            <a-form-item label="法人证件" prop="legalCardNo">
              <a-input v-model:value="model.legalCardNo"></a-input>
            </a-form-item>
            <a-form-item label="法人电话" prop="legalPhone">
              <a-input v-model:value="model.legalPhone"></a-input>
            </a-form-item>
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="attachments" tab="资料及扩展信息">
          <a-card title="企业资料信息" size="small">
            <div>
              <AttachmentInput
                :attachments="model.attachments"
                bucketName="default"
                bussinessType="Enterprise"
                dir="files/enterprise"
              />
            </div>
          </a-card>
          <a-card title="扩展信息" size="small" style="margin-top: 10px">
            <a-form-item label="扩展数据">
              <ExtraPropteries :items="model.extraProperties" />
            </a-form-item>
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { EnterpriseDto } from "@/api/organize/types";
import { useFormPage } from "@/helpers/pages";
import { FormInstance } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import api from "@/api/organize/enterprise";
import { EmptyGuid } from "@/helpers/contants";
import { useAppStore } from "@/store";
import { storeToRefs } from "pinia";
const formRef = ref<FormInstance>();
const emits = defineEmits(["update:visible", "close", "success"]);
const appStore = useAppStore();

const props = defineProps({
  id: String,
  visible: { type: Boolean, default: false },
  action: {
    type: String,
    default: "create",
  },
  item: {
    type: Object,
    default() {
      return {};
    },
  },
});

const { model, rules, formLayout, loading, submitLoading } = useFormPage<
  EnterpriseDto,
  string
>({
  rules: {
    code: [{ required: true, message: "请输入企业编码信息" }],
    name: [{ required: true, message: "请输入企业名称信息" }],
    type: [{ required: true, message: "选择企业行业类型信息" }],
    businessCode: [
      { required: true, message: "请输入企业营业代码（社会信息代码）" },
    ],
    address: [{ required: true, message: "请输入企业地址信息" }],
  },
  model: {
    code: "",
    name: "",
    type: "",
    subType: "",
    businessCode: "",
    attachments: [],
    regionCode: "",
    address: "",
    email: "",
    site: "",
    phone: "",
    status: true,
    legalName: "",
    legalCardNo: "",
    legalPhone: "",
    description: "",
    extraProperties: {},
  },
});

onMounted(async () => {});

const isEdit = computed(() => {
  return props.action === "edit";
});

/**
 * 弹窗标题
 */
const title = computed(() => {
  return isEdit.value ? "修改企业信息" : "添加企业信息";
});

const registeredCapital = computed(() => {
  if (model.registeredCapital) {
    let num = model.registeredCapital > 9999 ? 0 : 2;
    return (model.registeredCapital / 10000).toFixed(num) + "万元";
  } else {
    return "-";
  }
});

/**
 * 加载数据
 */
const loadData = () => {
  if (isEdit.value) {
    loading.value = true;
    api.get(props.id).then((res) => {
      Object.assign(model, res);
      loading.value = false;
    });
  }
};

/**
 * 提交
 */
const onSubmit = () => {
  emits("success");
  formRef.value.validate().then(() => {
    let request = isEdit.value
      ? api.update(props.id, model)
      : api.create(model);
    submitLoading.value = true;
    request.then((res) => { 
      emits("success", res);
      emits("update:visible", false);
      emits("close");
    })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

/**
 * 取消
 */
const onCancel = () => {
  emits("update:visible", false);
  emits("close");
};

watch(
  () => props.visible,
  (val: boolean) => {
    console.log("visible changed,val,", val);
    val && loadData();
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.tabs {
  margin-top: -12px;
}
</style>
